import { InputItem, Button, Modal } from 'antd-mobile'
import { Form } from 'antd'
import  styles  from './FormAccountFirst.scss'
import { connect } from 'dva'
const FormItem = Form.Item
const StepFirst = ({
  dispatch,
  modalControl,
  form: {
    validateFields,
    getFieldDecorator,
  }
}) => {
    // 18位正则表达式
    const regId = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    const submit = () => {
      validateFields(((error, value) => {
        if (!error) {
          console.log(value)
          dispatch({
            type: 'modules/getModules',
            payload: {
              pathname: '',
              businessId: '1231241200',
              tokenId: 'test',
              process: 'resetPassword',
              title: '交易密码重置'
            }
          })
        } else {
          console.log(error)
        }
      }))
    }
    const closeModal = () => {
      dispatch({
        type: 'reset/changeModal',
        payload: {
          modalControl: false
        }
      })
    }
        return (
          <Form onSubmit={submit} className={styles.stepFirstContainer}>
            <div className={styles.headWhite}></div>
            <div className={styles.inputSize}>
              <FormItem className='haveBorder'>
                {getFieldDecorator('accountNumber', {
                  rules: [
                    { required: true, message: '请输入资金账号' },
                    { pattern:/^(\d{10}|\d{12})$/, message: '请输入正确的资金账号'}
                  ]
                })(
                  <InputItem placeholder='请输入资金账号' type='number'>
                    资金账号:
                  </InputItem>
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('id', {
                  rules: [
                    { required: true, message: '请输入身份证号码'},
                    { pattern: regId, message: '请输入正确的身份证号码'}
                  ]
                })(
                  <InputItem placeholder='请输入身份证号'>
                    身份证号码:
                  </InputItem>
                )}
              </FormItem>
            </div>
            <FormItem>
              <Button type='primary' onClick={submit}>下一步</Button>
            </FormItem>
            <Modal
              visible={modalControl}
              transparent
              maskClosable={false}
              title="温馨提示"
              footer={[{ text: '确定', onPress: () => { closeModal() }}]}
            >
              <div>
                您输入的资金账号与身份证号码不匹配, 请确认后再试
              </div>
            </Modal>
          </Form>
      )
}
const WrappedStepFirst = Form.create()(StepFirst)
// const StepFirsts = connect(state => state.reset)(WrappedStepFirst)
// module.exports = StepFirsts
export default connect(state => state.reset)(WrappedStepFirst)